import React, { useState, useEffect } from 'react';

interface ClockProps {}

// interface ClockState {
//   currentTime: Date;
// }

const RealTimeClock: React.FC<ClockProps> = () => {
  const [currentTime, setCurrentTime] = useState<Date>(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    // 清除定时器，防止内存泄漏
    return () => clearInterval(timer);
  }, []);

    const formatDate = (date: Date): string => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
        const day = String(date.getDate()).padStart(2, '0'); // 补零
        const hours = String(date.getHours()).padStart(2, '0'); // 补零
        const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
        const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
        // const data = String(`${year}年${month}月${day}日`)
        // const time = String(``)
    
        // return data;
        return `${year}年${month}月${day}日/${hours}点${minutes}分${seconds}秒`;
    };

  return (
    <div style={{ fontSize: '14px', color:'#333'}}>
      {formatDate(currentTime).split('/')[0]}
      <span style={{marginLeft:'12px'}}>{formatDate(currentTime).split('/')[1]}</span>
    </div>
  );
};

export default RealTimeClock;